<template>
  <div class="content-box">
    <common-header :tittle="tittle" :showback="false"></common-header>
    <div class="page-content" v-if="!showMark">
      <div class="testPaper" v-for="(item,index) in testArr" :key="index" v-show="index == showIndex">
        <span class="title">请问&emsp;<span style="color:red;">{{item.name}}</span>&emsp;属于什么垃圾？</span>
        <mt-radio v-model="answer" align="left" :options="options" @change="changeShow">
        </mt-radio>

        <div class="next">
          <mt-button @click="next">下一题</mt-button>
        </div>
      </div>
    </div>
    <div class="page-content" v-else>
      <div class="testPaperCopy">
        <div class="title">您的分数为 <span class="error">&nbsp;{{mark}}</span></div>
        <tr>
          <thead>
            <tr>
              <th>&emsp;序号&emsp;</th>
              <th>测试题目</th>
              <th>你选择的答案</th>
              <th>正确答案</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in testArr" :key="index">
              <td style="text-align:center">{{index+1}}</td>
              <td>{{item.name}}</td>
              <td :class="item.answer == item.type ? '':'error'">{{item.answer | rubbish}}</td>
              <td>{{item.type | rubbish}}</td>
            </tr>
          </tbody>
        </tr>
      </div>
    </div>
  </div>
</template>

<script>
import commonHeader from "common/common-header";
import { Button, Radio, Toast } from "mint-ui";
export default {
  data() {
    return {
      showMark: false,
      mark: 0,
      showIndex: 0,
      answer: "",
      tittle: "垃圾分类测试题",
      // num: 0
      testArr: [],
      options: [
        {
          label: "可回收垃圾",
          value: "0"
        },
        {
          label: "有害垃圾",
          value: "1"
        },
        {
          label: "厨余垃圾",
          value: "2"
        },
        {
          label: "其他(干)",
          value: "3"
        }
      ]
    };
  },
  filters: {
    rubbish: function(value) {
      let type;
      if (value == 0) {
        type = "可回收垃圾";
      } else if (value == 1) {
        type = "有害垃圾";
      } else if (value == 2) {
        type = "厨余垃圾";
      } else if (value == 3) {
        type = "其他垃圾";
      }
      return type;
    }
  },
  created() {
    for (let i = 0; i < 10; i++) {
      this.$axios
        .get(
          "http://api.tianapi.com/txapi/anslajifenlei/index?key=ee4fe2fe33e09349c9174182acaf1743"
        )
        .then(res => {
          if (res.data.code == 200) {
            this.testArr = this.testArr.concat(res.data.newslist);
          } else {
            alert("系统异常");
          }
        });
    }
  },
  computed: {},
  methods: {
    changeShow(e) {
      this.testArr[this.showIndex].answer = e;
    },
    next() {
      if (!this.answer) {
        Toast({
          message: "请填写答案",
          position: "middle",
          duration: 1000
        });
      } else {
        this.answer = "";
        if (this.showIndex < this.testArr.length - 1) {
          this.showIndex++;
        } else {
          let count = 0;
          this.testArr.forEach(element => {
            if (element.type == element.answer) {
              count++;
            }
          });

          this.mark = Math.floor((count / this.testArr.length) * 100);
          this.showMark = true;
        }
      }
    },
    todetail() {
      this.$router.togo("/Home/Detail");
    }
  },
  components: {
    commonHeader,
    Toast
  }
};
</script>

<style scoped lang="less">
@import "~styles/index.less";
@import "~styles/variable.less";
.page-content {
  text-align: left;
}

.title {
  // margin-top: 80px;
  font-size: 36px;
  line-height: 60px;
  height: 60px;
  display: inline-block;
}
.testPaper {
  padding: 80px;
}
.testPaperCopy {
  padding: 80px 60px 0 60px;
}
// .mint-radiolist{
// // margin-top: 40px;
// font-size: 20px;
// }
.mint-radiolist-title {
  display: none;
}
.error {
  color: rgb(250, 81, 81);
}
table {
  margin-top: 30px;
  width: 100%;
  font-size: 26px;
}
tr {
  border-top: 1px solid #e5e5e5;
  height: 80px;
}
tr:last-child {
  border-bottom: 1px solid #e5e5e5;
}
th,
td {
  vertical-align: middle;
}
// .radio {
//   touch-action: none;
// }
.next {
  margin-top: 40px;
  text-align: center;
  button {
    background-color: rgb(250, 81, 81);
    color: #fff;
  }
}
.mint-radiolist {
  margin-top: 30px;
}
</style>
<style>
.mint-radiolist {
  margin-top: 40px;
}
.mint-radiolist-title {
  display: none;
}
.mint-cell-wrapper {
  background-image: none;
  font-size: 30px;
}
.mint-cell {
  border-top: 1px solid #e5e5e5;
}
.mint-cell:last-child {
  border-bottom: 1px solid #e5e5e5;
}
</style>
